<template>
  <div id="right-container">
    <div class="rightContainer">
      <dv-border-box-10>
        <div class="rightContainer_second">
          <div class="rightContainer_top_title">
            干预公共卫生
          </div>
          <div class="rightContainer_second_body">
            <div style="height:calc(25vh)">
              <VEcharts
                ref="chartClass"
                autoresize
                :options="rightconfig"
                class="chartClass"
                style="width:100%;height:100%"
              />
            </div>
          </div>
          <div class="rightContainer_top_title" style="margin-bottom:10px">
            全市药店等级占比
          </div>
          <div class="rightContainer_second_body">
            <div style="height:calc(25vh)">
              <VEcharts
                ref="chartClass"
                autoresize
                :options="djConfig"
                class="chartClass"
                style="width:100%;height:100%"
              />
            </div>
          </div>
          <div class="rightContainer_top_title" style="margin:10px 0px">
            百姓药品查询统计
          </div>
          <div style="height:calc(25vh)">
            <VEcharts
              ref="chartClass"
              autoresize
              :options="rightconfig1"
              class="chartClass"
              style="width:100%;height:100%"
            />
          </div>
        </div>
      </dv-border-box-10>
    </div>
  </div>

</template>

<script>
import VEcharts from '@/components/vecharts';
// import scrollBoard from './scrollBoard';
export default {
  components: {
    VEcharts
    // scrollBoard
  },
  data() {
    return {
      djConfig: {

        legend: {
          orient: 'vertical',
          left: 'right',
          textStyle: { // 图例文字的样式
            color: '#fff',
            fontSize: 13
          }
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: 'A级药店' },
              { value: 735, name: 'B级药店' },
              { value: 580, name: 'C级药店' },
              { value: 550, name: 'D级药店' }

            ],
            label: { // 饼图图形上的文本标签
              normal: {
                show: true,
                position: 'inner', // 标签的位置
                textStyle: {
                  fontWeight: 300,
                  fontSize: 12 // 文字的字体大小
                },
                formatter: '{d}%'

              }
            },

            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      config: {
        header: ['药品名称', '药店名称', '数量', '销售时间'],
        data: [
          ['诺氟沙星胶囊', '绍***********店', '66', '2018-02-28'],
          ['三黄片', '新*********店', '35', '2020-02-28'],
          ['硫酸庆大霉素注射液*', '老***店', '67', '2020-02-28'],
          ['银翘解毒合剂', '怡***房', '3', '2020-02-28'],
          ['脑心舒口服液', '人**店', '23', '2020-02-28'],
          ['注射用盐酸纳洛酮', '祥*******司', '85', '2020-02-28'],
          ['脑心舒口服液', '华*******店', '12', '2020-02-28'],
          ['阿卡波糖片', '健***店', '16', '2020-02-28'],
          ['复方氨酚烷胺片', '康***房', '56', '2020-02-28']
        ],
        columnWidth: [130, 120, 90, 140],
        align: ['center'],
        rowNum: 7,
        headerBGC: '#1981f6',
        headerHeight: 35,
        oddRowBGC: 'rgba(0, 44, 81, 0.8)',
        evenRowBGC: 'rgba(10, 29, 50, 0.8)'
      },
      rightconfig1: {
        xAxis: {
          type: 'category',
          data: ['3月', '4月', '5月', '6月', '7月', '8月', '9月']
        },
        yAxis: {
          type: 'value'
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '5%',
          top: '10%',
          containLabel: true
        },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar'
        }]
      },
      rightconfig: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '3%',
          top: '10%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['6号', '7号', '8号', '9号', '10号', '11号', '12号']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '销售量',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '销售量1',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '销售量2',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [150, 232, 201, 154, 190, 330, 410]
          }

        ]
      }
    };
  },
  mounted() {

  },
  methods: {

  }

};
</script>

<style scoped lang='scss' >
  .rightContainer{
    height: calc(100vh - 90px);
    border-radius: 10px;
   }
    .rightContainer /deep/ .dv-border-box-10 .border-box-content {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 20px;
  }
   .rightContainer_top_title{
     font-size: 17px;
     font-weight: bolder;
   }
    .rightContainer_second_body /deep/  #scroll-board {
      box-sizing: border-box;
      height: 100%;
      overflow: hidden;
      width: 220px !important
    }
    .rightContainer_second_body /deep/.dv-scroll-board {
    position: relative;
    width: 100%;
    height: calc(25vh) !important;
    color: #fff;
}

</style>
